<docs>
  ## 我的模块
</docs>
<template>
  <div>
    <div class="beijingtu"></div>

    <div class="bg_g">
      <div id="content">
        <div class="box clearfix" @click="fn(idx)" v-for="(item,idx) in arr" :key="idx">
          <img src="../../common/images/mb3.png" alt v-show="item=='绿色模版'" />
          <div :class="idx== data.jlmbys?'check':'unchecked'"></div>
          <!-- <div class="describe" :style="item=='绿色模版'?'margin-top:0':'margin-top:2.6rem'">{{item}}</div> -->
        </div>
        <!-- <div class="box clearfix"  @click="fn(idx)">
         <div  :class="idx==index?'check':'unchecked'"></div>
        <div class="describe" style="margin-top:0">浅蓝模版</div>
        </div>-->
        <!-- <div class="box clearfix">
         <div class="unchecked"></div>
        <div class="describe">绿色模版</div>
      </div>
      <div class="box clearfix">
         <div class="unchecked"></div>
        <div class="describe">红色模版</div>
      </div>
      <div class="box clearfix">
         <div class="unchecked"></div>
        <div class="describe">蓝色模版</div>
      </div>
      <div class="box clearfix">
         <div class="unchecked"></div>
        <div class="describe">蓝黄模版</div>
        </div>-->
      </div>
    </div>
    <div class="bottom"></div>
    <!-- 底部保存 -->
    <div class="info-bottom">
      <button class="bc" @click="gotocv">保&nbsp;&nbsp;存</button>
    </div>
  </div>
</template>
<script>
import $ from "@/common/js/axios";

export default {
  data() {
    return {
      data: {
        jlmbys: ""
      },
      arr: ["默认模版", "绿色模版"] // 到时候有几个皮肤
    };
  },
  methods: {
    fn(idx) {
      // 选择
      this.data.jlmbys = idx;
    },
    //查询模板
    GET_mb() {
      this.$loading = true;
      $.get("/wdjl/jlmbysCx").then(res => {
        this.fn(res.returnData.jlmbys);
        this.$loading = false;
      });
    },
    //保存模板
    gotocv() {
      this.$loading = true;
      $.post("/wdjl/jlmbBc", this.data).then(res => {
        this.$loading = false;
        if (res.returnData.executeResult == "1") {
          this.$router.push({ path: "/cv" });
        } else {
          this.$alert({
            type: "warning",
            message: res.returnData.message
          });
        }
      });
    }
  },
  created() {
    this.GET_mb();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/var.scss";
.bg_g {
  padding: 0 34px;
  overflow: hidden;
  position: relative;
}
.beijingtu {
  width: 100%;
  height: 880px;
  background: url("../../common/images/beijing.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: -9000;
  margin-top: -3.8rem;
}
.bottom {
  width: 100%;
  height: 190px;
  background: url("../../common/images/dbg.png") no-repeat;
  background-size: 100%;
  position: fixed;
  bottom: 0;
}
.unchecked {
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0.1);
  // border: 4px solid rgba(255, 255, 255, 1);
  // opacity: 0.75;
  border-radius: 50%;
  position: absolute;
  right: 10%;
  top: 15%;
}
.check {
  width: 46px;
  height: 46px;
  background: url("../../common/images/check.png") no-repeat;
  background-size: 100%;
  position: absolute;
  right: 10%;
  top: 15%;
  //  border: 4px solid rgba(255, 255, 255, 1);
}
#content {
  // width: 80%;
  padding: 0.5rem;
  background: white;
  overflow: hidden;
  margin: 1rem auto;
}
.box {
  width: 278px;
  height: 182px;
  border-radius: 20px;
  float: left;
  margin: 1rem 0.14rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
}
.describe {
  margin-top: 2.6rem;
  text-align: center;
}
.box:nth-child(1) {
  background: url("../../common/images/mb1.png") no-repeat;
  background-size: 100%;
}
.box:nth-child(2) {
  background: url("../../common/images/mb3.png") no-repeat;

  background-size: cover;
}
.box:nth-child(3) {
  background: url("../../common/images/bj.png") no-repeat;
  // background: url("../../common/images/mb3.png") no-repeat;
  background-size: 100%;
}
.box:nth-child(4) {
  background: url("../../common/images/mb4.png") no-repeat;
  background-size: 100%;
}
.box:nth-child(5) {
  background: url("../../common/images/mb5.png") no-repeat;
  background-size: 100%;
}
.box:nth-child(6) {
  background: url("../../common/images/mb6.png") no-repeat;
  background-size: 100%;
}
</style>
